<template>
  <div id="app" class="card-container">
    <CustomCard
        v-for="(item, index) in items"
        :key="index"
        :title="item.title"
        :imageSrc="item.imageSrc"
        :content="item.content"
    />
  </div>
</template>

<script>
import CustomCard from "@/views/ecoProduce/component/CustomCard.vue";

import hehongcha from '@/assets/img/ecoProduce/img/hehongcha.png'
import hongyayu from '@/assets/img/ecoProduce/img/hongyayu.png'
import yanshantangfen from '@/assets/img/ecoProduce/img/yanshantangfen.png'
import maciguo from '@/assets/img/ecoProduce/img/maciguo.png'
import dengzhanguo from '@/assets/img/ecoProduce/img/dengzhanguo.png'

import sizhi from '@/assets/img/ecoProduce/img/sizhi.png'
import huanggangshan from '@/assets/img/ecoProduce/img/huanggangshan.png'
import mingqingguzhen from '@/assets/img/ecoProduce/img/mingqingguzhen.png'
import taiyuanshezu from '@/assets/img/ecoProduce/img/taiyuanshezu.png'
import gexianshan from '@/assets/img/ecoProduce/img/gexianshan.png'

export default {
  name: 'App',
  components: {
    CustomCard
  },
  data() {
    return {
      items: [
        {
          title: '麻糍粿',
          imageSrc: maciguo,
          content: '麻糍粿是江西上饶和福建武夷山民间的一种特色小吃。麻糍粿就是将蒸熟蒸烂的糯米放在特制的石槽（叫“臼”）里用木质的锤子捣烂之后在外面裹上碾碎的炒豆、芝麻、白砂糖等而成的一种甜食。 在民间也通常被称为“麻子果”，在上饶也有将其与油条混在一起吃的“油条夹麻子果”。'
        },
        {
          title: '铅山烫粉',
          imageSrc: yanshantangfen,
          content: '麻糍粿是江西上饶和福建武夷山民间的一种特色小吃。麻糍粿就是将蒸熟蒸烂的糯米放在特制的石槽（叫“臼”）里用木质的锤子捣烂之后在外面裹上碾碎的炒豆、芝麻、白砂糖等而成的一种甜食。 在民间也通常被称为“麻子果”，在上饶也有将其与油条混在一起吃的“油条夹麻子果”。'

        },
        {
          title: '红芽芋',
          imageSrc: hongyayu,
          content: '红芽芋是芋类品种之一，属广东农家品种，种植历史悠久，多在田边、地边、厢边作边际栽培。红芽芋含淀粉较多，品质鲜美、细腻，粉而不粘，口感好，蒸煮熟食，营养全面。鲜芋食用，也可干制。'
        },
        {
          title: '灯盏粿',
          imageSrc: dengzhanguo,
          content: '灯盏粿是江西省上饶市铅山县的地方特色小吃。因外形呈灯盏状而得名，外皮由大米制成，中间添馅，馅大多数有新鲜香菇，鲜猪肉，黄豆芽，鲜竹笋等（也可因个人口味不同酌情增减），最后放入竹制小蒸笼中用大火蒸半小时左右即可，色香味俱全，食后回味无穷，齿颊留香。'
        }
      ]
    }
  }
}
</script>

<style>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card-container .custom-card {
  flex: 1 1 calc(50% - 10px); /* 减去间隔 */
  margin-bottom: 20px;
}
</style>
